<template>
<div style="height:100%;overflow-x:hidden">
  <!-- <scroller> -->
    <div style="padding-bottom:50px">
    <x-header :left-options="{backText:''}">消息</x-header>
    <!-- <nut-noticebar v-if="emergencyNoticeList.length > 0"
        :text="emergencyNoticeMes"
        :scrollable="true"
    ></nut-noticebar> -->
    <div v-show="emergencyNoticeList.length > 0" class="emergency_div">
      <img src="@/assets/img/color.png" class="emergency_img"/>
      <div class="emergency_mes_div" ref="box_div">
        <div class="emergency_mes" ref="box">
          <p ref="mes" class="mes">{{emergencyNoticeMes}}</p>
        </div>
      </div>
    </div>
     <!-- <simple-search :placeholder="'输入名称或关键字'">
    </simple-search> -->

    <!-- <div v-show="this.total==0" >
      <divider style="color: #202020;">无通知消息</divider>
    </div> -->


    <div v-if="emergencyNoticeList.length == 0 && noticeList.length == 0" style="display:flex;flex-direction:column; justify-content: center;align-items: center;width:100%;height:300px" >
      <img src="../assets/img/none_message.png" >
      <span>暂无消息</span>
    </div>

    <!-- <div v-for="(item,index) in emergencyNoticeList" :key="index" @click="openInfo(item)" class="whole_div">
      
      <swipeout style="padding:10px">
        <swipeout-item>
          <div slot="content" style="display:flex">
            <img src="../assets/img/mes_emergency.png" class="mes_icon"/>
            <div class="info">
            <div>紧急通知</div>
            <div class="systemInfo" v-html="item.NOTICE"></div>
            </div>
            <div class="mes_date">{{item.CREATETIME.substring(0,10)}}</div>
          </div>
        </swipeout-item>
      </swipeout>
    </div> -->

    <div v-for="(item1,index1) in noticeList" :key="index1" class="whole_div">
      
      <swipeout style="padding:10px">
        <swipeout-item>
          <div slot="right-menu">
            <swipeout-button type="primary" @click.native="read(item1)">已阅</swipeout-button>
          </div>
          <div slot="content" style="display:flex" @click="openInfo(item1)">
            <img src="../assets/img/mes_notice.png" class="mes_icon"/>
            <div class="info">
            <div>系统消息</div>
            <div class="systemInfo" v-html="item1.TITLE"></div>
            </div>
            <div class="mes_date">{{item1.SENTTIME.substring(0,10)}}</div>
          </div>
         
        </swipeout-item>
      </swipeout>
      <!-- <swipeout v-if="item1.ISREAD == '1'">
        <swipeout-item>
        <div slot="content" style="display:flex" @click="openInfo(item1)">
            <img src="../assets/img/mes_notice.png" class="mes_icon"/>
            <div>
            <div>系统消息</div>
            <div>{{item1.TITLE}}</div>
            </div>
            <div class="mes_date">{{item1.SENTTIME.substring(0,10)}}</div>
          </div>
        </swipeout-item>
      </swipeout> -->
     
    </div>
  </div>
    <!-- <div>
      <div v-for="(item1,index1) in noticeList" :key="index1">
        <div></div>
        <div>
          <div>系统消息</div>
          <div>{{item1.TITLE}}</div>
        </div>
      </div>
    </div> -->
    <router-view style="height:100%;"></router-view>
    <!-- </scroller> -->
</div>
</template>

<script>
import { NoticeBar  } from '@nutui/nutui'
import Vue from 'vue'
NoticeBar.install(Vue)
import $ from 'jquery'
 import { Swipeout, SwipeoutItem, SwipeoutButton , Divider} from 'vux';
export default {
  components: {
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    Divider,
  },
 
  name : "systemInfo",

  data () {
    return {
        emergencyNoticeList: [],
        noticeList:[],
        pageIndex : 1,
        pageSize : 50,
        loginUserId : this.$store.state.user.USER_NO,
        total : 0,
        emergencyNoticeMes:"",
      }
    },
    created(){
        this.getEmergencyNotice()
        this.getNotice()
    },
    mounted(){
           
            var target = this.$refs.box;
            var mes = this.$refs.mes;
            var box_div = this.$refs.box_div;
            
                  var initLeft = 0;
                    setInterval(()=>{
                      if(initLeft == 0){
                        mes.style = 'padding-left : ' + box_div.offsetWidth + 'px'
                      }
                        initLeft +=0.5;
                        if(initLeft > target.offsetWidth){
                            initLeft = 0;
                        }
                        target.style = 'transform: translateX(-'+ initLeft +'px)';
                    },50)
    },
    methods:{
      //获取消息模块角标数量
      // getTotal(num){
      //   this.total = this.total + num;
        
      //   console.log("asdfghjkl",this.$store.state.systemCount);
      // },
      //获取紧急信息通报
        getEmergencyNotice(){
            // var params = '{"_method":"component.getListData","_param":{"bizObj":"EMERGENCYNOTICE",'+
            // '"service":"selectMore","fields":"*","filter":"1=1","currentPageIndex":' + this.pageIndex + ',"pageSize":'+ 
            // this.pageSize + ',"orderList":[{"field":"CREATETIME","order":"DESC"}],"QueryFormData":""}}'
            // var params = '{"_method":"EMERGENCYNOTICE.getNews"}'
            //var params = '{"_method":"EMERGENCYNOTICE.getNews"}'
            var params = {
              "_method" : "EMERGENCYNOTICE.getNews",
              //  "_param":{
              //    "orderList":[{"field":"INPUTDATE","order":"DESC"}]
              //  }
            }
            let json = {
              FixJSON : JSON.stringify(params),
            };
            //console.log(this.signMD5(json));
            this.$ajax({
                method: 'post',
                url: this.COMMON_URL,
                // data: this.signMD5(json)
                data:json
            }).then(res =>{
                console.log(res)
                this.emergencyNoticeList = res.data.data
                if(this.emergencyNoticeList.length > 0){
                  this.emergencyNoticeMes = this.emergencyNoticeList[0].NOTICE
                }
                // this.getTotal(this.emergencyNoticeList.length)
                // this.$store.commit("setSystemCount",this.emergencyNoticeList.length+this.noticeList.length)
               // console.log(this.emergencyNoticeList)
            })
        },
        //获取消息通知
        getNotice(){
          // var params = '{"_method":"component.getListData","_param":{"bizObj":"SYS_NOTICE",'+
          // '"service":"selectMore","fields":"*","filter":"MessageTo = {sysLoginUser.loginId} and SentTime <GETDATE()",'+
          // '"currentPageIndex":'+ this.pageIndex + ',"pageSize":' + this.pageSize + ',"orderList":[{"field":"SENTTIME","order":"desc"}],"QueryFormData":""}}'

          // this.$ajax({
          //   method : 'POST',
          //   url : this.COMMON_URL + '?_objName=SYS_NOTICE&_viewId=showAllNotice',
          //   data : {
          //     FixJSON : params
          //   }
          // }).then(res =>{
          //   console.log(res)
          //   this.noticeList = res.data.datas
          //   console.log(this.noticeList)
          // })
          //var params = '{"_method":"SYS_NOTICE.getNotice","loginUserId":"'+this.loginUserId+'"}'
          var params = {"_method":"SYS_NOTICE.getNotice","loginUserId":this.loginUserId}
          let json = {
            FixJSON : JSON.stringify(params),
          }
          this.$ajax({
            method : 'post',
            url : this.COMMON_URL,
            // data : {
            //     FixJSON : params
            // }
            // data : this.signMD5(json)
            data:json
          }).then(res=>{
            console.log(res)
            this.noticeList = res.data.noticeList
            this.$store.commit("setSystemCount",this.noticeList.length);
            // this.getTotal(this.noticeList.length)
          })
        },
        openInfo(item){
          this.$router.push({
            path: 'systemDetailInfo',
            name: 'systemDetailInfo',
            params : {
              item : item
            }
          })
        },
        //消息通知已阅
        read(item){
          console.log(item.TITLE)
          var params = '{"_method":"SYS_NOTICE.updateNoticeIsRead","pkid":"' + item.PKID +
          '","messageto":"' + item.MESSAGETO +'"}';

          this.$ajax({
            method : 'post',
            url : this.COMMON_URL + '?_isBreak=false&objName=SYS_NOTICE&_useType=view&_pk=PKID&_pkValue=',
            data : {
              FixJSON : params
            }
          }).then(res =>{
            this.getNotice();
            // this.total = this.emergencyNoticeList.length;
          })
        }
    },
    watch:{
      emergencyNoticeMes(){
      
      }
    }
}
</script>

<style scoped>
.mes{
  display: block;
}
.emergency_mes_div{
  width: 92%;
  overflow:hidden
}
  .emergency_div{
    background:#FCF4E0;
    display:flex;
    width: 100%;
    height: 33px;
    align-items: center;
  }
  .emergency_img{
    width:15px;
    height:15px;
    padding: 2% 2% 2% 6%;
  }
  .emergency_mes{
    width: fit-content;
    height: 20px;
    font-size:12px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:#FFA028;
    line-height:18px;
    white-space: nowrap;
    /* animation: marquee 5s linear infinite; */
  }
  /* @keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
  } */
  .info{
    width: 55%;
  }
  .mes_icon{
    width: 50px;
    height: 50px;
    margin-right: 3%;
  }
  .mes_date{
    font-size:12px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:#AFAFAFFF;
    line-height:20px;
    margin-right: 30px;
  }
  .systemInfo{
    margin-right: 5%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #999999;
    font-family:PingFangSC-Regular;
  }
  /* .content /deep/ .vux-header{
    background-color: #ffffff !important;
  } */
  .transition-view .vux-header /deep/ .vux-header-left .left-arrow:before{
    border: none !important;
  } 
  /* .transition-view .vux-header /deep/ .vux-header-title{
        color: #262A34;
  } */
   .moa-search-div /deep/ .moa-search-button{
    display: none ;
  }
  .whole_div{
    border-bottom: 1px solid #eeeeee;
  }
</style>
